window.onload = function () {
    //功能1：实现左右箭头的显示与隐藏
    let arrowLeft = document.querySelector(".arrow-left")
    let arrowRight = document.querySelector(".arrow-right")
    let banner = document.querySelector(".banner")

    banner.addEventListener('mouseenter', () => {
        arrowLeft.style.display = 'block'
        arrowRight.style.display = 'block'
    //    定时器取消
        clearInterval(myTimer)
    })

    banner.addEventListener('mouseleave', () => {
        arrowLeft.style.display = 'none'
        arrowRight.style.display = 'none'
    //    定时器生效
        myTimer=setInterval(()=>{
            arrowRight.click()
        },2000)
    })
    // 功能2：生成小圆圈
    let ol = document.querySelector(".circle")
    let ul = document.querySelector(".banner-image")
    let uLis = ul.querySelectorAll("li")
    for (let i = 0; i < uLis.length; i++) {
        let oli = document.createElement("li")
        if (i === 0) {
            oli.className = 'current '
        }
        //给圆圈编号，从0开始
        oli.setAttribute("index", i)
        ol.appendChild(oli)
    }
    // 功能3：小圆圈的切换
    let oLis = ol.querySelectorAll("li")
    oLis.forEach((oLi) => {
        oLi.addEventListener('click', function () {
            oLis.forEach((li) => {
                li.className = ''
            })
            this.className = 'current'
            // 功能4：滑动轮播图
            let index = parseInt(this.getAttribute("index"))
            let stepWidth = 720
            animation(ul, -stepWidth * index)
        })
    })


//功能5:点击向右的箭头，实现图片滑动
    let circle = 0;
    let num = 0;//计数器，统计点了几次
    let imageAmount = uLis.length; //克隆之前获取图片个数（4张图）
    //克隆第1张图片，放在ul的最后面
    let firstuli=ul.firstElementChild;
    let firstuliClone=firstuli.cloneNode(true);
    //将克隆出来的li放在ul的最后面
    ul.appendChild(firstuliClone)
    arrowRight.addEventListener('click',function () {
        num++;
    //    计算图片的滑动距离
        if (num > imageAmount){
            num=1
            ul.style.left='0px'
        }
        animation(ul,-num*720)
    //    功能6：小圆圈跟随变化
        circle++;
        if (circle==imageAmount){
            circle=0;
        }
    //    将所有的小圆圈上面的样式去掉
        let oLis=ol.querySelectorAll("li")
        oLis.forEach(function (oLi) {
            oLi.className=''
        //    给当前的小圆圈，加上样式
            let index=oLi.getAttribute('index')-0
            if (circle===index){
                oLi.className='current'
            }
        })
    })
// 功能：左侧按钮功能 arrowLeft.addEventListener('click',function () { num--; let stepWidth = 720; if(num<0){ num= imageAmount - 1; // num值是3 ul.style.left = -imageAmount * stepWidth + 'px'; //注意这里left 是负 值 }animation(ul,- num * stepWidth); // 小圆圈跟随方向按钮变化 circle--; if(circle <0){ circle = imageAmount - 1; // circle值是3 }let oLis = ol.querySelectorAll("li"); oLis.forEach(oLi=>{ oLi.className = ''; let circleIndex = oLi.getAttribute('index'); if(circleIndex == circle){ oLi.className = 'active-circle'; } }) });
}